<template>
    <div class="col-10 col-lg-4 col-sm-8" style="margin: 200px auto;">
        <form @submit.prevent="login">
            <img src="../../../assets/images/login.svg" alt="" style="margin-left: 35%; width: 120px;">
            <div class="input-group flex-nowrap input">
                <span class="input-group-text" >用户</span>
                <input type="text" v-model="username" class="form-control" placeholder="Username">
            </div>
            <div class="input-group flex-nowrap input">
                <span class="input-group-text" >密码</span>
                <input type="password" v-model="password" autocomplete="off" class="form-control" placeholder="Password">
            </div>
            <button type="submit" style="width: 45%;margin-top: 20px;margin-right: 10%;" class="btn btn-primary">登录</button>
            <button type="button" @click="toRegister" style="width: 45%;margin-top: 20px;" class="btn btn-success">注册</button>
        </form>
    </div>
</template>
<script>
    import {ref} from 'vue';
    import {useStore} from 'vuex'
    import {useRouter} from 'vue-router'
    export default{
        name:'UserAccountLogin',
        components:{
        },
        setup() {
            let username = ref('');
            let password = ref('');
            const store = useStore();
            const router = useRouter();
            const jwt_token = localStorage.getItem('jwt_token');
            if(jwt_token){
                store.commit('GetToken',jwt_token);
                store.dispatch('getUser','/')
            }
            let login = function(){
                store.dispatch('login',{
                    username:username.value,
                    password:password.value,
                })
            }
            let toRegister = function(){
                router.push({name:'register'})
            }
            return {
                username,
                password,
                login,
                toRegister
            }
        },
    }
</script>

<style scoped>
.input{
    margin-top: 10px;
}
</style>